<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="我的订单"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div v-for="(item, index) in orderInfo" :key="index">
            <van-cell-group inset @click="getOrderDetail(item.id)">
            <van-cell :title="item.order_number" :value="item.status" :label="item.total  + `￥` + ``" />
            </van-cell-group>
        </div>
    </div>
    <van-popup v-model:show="dialogVisibleCheckOrder" position="bottom" style="max-height: 15rem; line-height: 3rem; text-align: center; padding-bottom: 1rem;">
        <el-table :data="orderDetailData" stripe style="width: 100%">
            <el-table-column type="index" width="50" />
            <el-table-column prop="product_info.title" label="名称"  width="200" show-overflow-tooltip />
            <el-table-column prop="product_info.price" label="单价"/>
            <el-table-column prop="count" label="数量" width="50" />
        </el-table>
    </van-popup>
</template>


<script setup>
import { ref } from 'vue';
import { orderList, orderDetail } from '@/requests/index';
const orderInfo = ref();
const orderDetailData = ref();
const msg = ref();
const dialogVisibleCheckOrder = ref(false);

const getOrderList = async () =>{
    const res = await orderList();
    if (res.status === 2000){
        orderInfo.value = res.data;
    }else{
        console.log("获取订单列表失败")
    };
};
// 查看订单详情
const getOrderDetail = async (id) => {
    dialogVisibleCheckOrder.value = true;
    const res = await orderDetail({ "id": id })
    if (res.status === 2000) {
        orderDetailData.value = res.data;
    } else {
        msg.value = res.msg;
    };
};
getOrderList();
const onClickLeft = () => history.back();
</script>